<template>
  <div id="home" class="home">
    
    <van-tabs v-model="active" @click="scroll" :class="{'fixed': true, 'slide-in': isFixedNav}" ref="topMenu" id="topMenu">
      <van-tab title="形象预警">
      </van-tab>
      <van-tab title="财务预警">
      </van-tab>
      <van-tab title="市值预警">
      </van-tab>
      <van-tab title="合规预警">
      </van-tab>
    </van-tabs>
   
   <!--
    <van-row :class="{'warning-top-menu': true, 'fixed': true, 'slide-in': isFixedNav}" ref="topMenu" id="topMenu">
      <div v-for="(nav, index) in navs" @click="scroll(nav.id, nav.index)" :key="index" :class="{'van-tab': true, 'van-tab--active': active === nav.index}"><a class="van-ellipsis">{{nav.text}}</a></div>
    </van-row>
   -->    
     
    <div>
      <Imager id="imageWarning" />
      <div class="page-split"></div>
      <FinancialWarning id="FinancialWarning"/>
      <div class="page-split"></div>
      <MarketWarning id="MarketWarning"/>
      <div class="page-split"></div>
      <ComplianceWarning id="ComplianceWarning"/>
    </div>
    
  </div>
</template>

<script>
// @ is an alias to /src
import { enums,BASIC_URL } from '@/core/config';
import router from '@/router';
import IngotCookie from '@/utils/cookie.js';
import { mapGetters, mapActions } from 'vuex';
import { getomplex_score } from '@/api/api.js'
import { Tab, Tabs } from 'vant';
import Header from '@/components/Header';
import Imager from '@/views/ImageTab';
import FinancialWarning from '@/views/FinancialWarning';
import MarketWarning from '@/views/MarketWarning';
import ComplianceWarning from '@/views/ComplianceWarning';

const jumpLoginPage = () => {
  router.push({ name: 'login' })
}

export default {
  name: 'warning',
  components: {
    'dq-Header':Header,
    Imager,
    FinancialWarning,
    MarketWarning,
    ComplianceWarning
  },
  data() {
    return {
        navs: [
          {
            id: 'imageWarning',
            text: '形象预警',
            index: 0,
          },
          {
            id: 'FinancialWarning',
            text: '财务预警',
            index: 1,
          },
          {
            id: 'MarketWarning',
            text: '市值预警',
            index: 2,
          },
          {
            id: 'ComplianceWarning',
            text: '合规预警',
            index: 3,
          },
        ],
        title: '预警',
        isShow: false,
        current: '',
        hei:0,
        showLoading: false,
        scrollTop: 0,
        active: 0,
        isFixedNav: false,
        // loginForm: {
        //     username: '',
        //     password: ''
        // }
    }
  },
  // computed:{
  //   ...mapGetters([
  //     'get_source',
  //     'get_device_id',
  //     'get_user_id',
  //     'get_sign',
  //     'get_market',
  //     'get_token'
  //   ]),
  // },
  created() {
    this.$store.commit('set_top_title',this.title);
    console.log("BASIC_URL",BASIC_URL)
    // window.addEventListener('scroll', this.handleScroll);
    // this.ac_source(this.getUrlStr('source'))
    // this.ac_device_id(this.getUrlStr('device_id'))
    // this.ac_user_id(this.getUrlStr('user_id'))
    // this.ac_sign(this.getUrlStr('sign'))
    // this.ac_market(this.getUrlStr('market'))
    // this.ac_token(this.getUrlStr('token'))

    // getomplex_score().then(response => {
    //   console.log("response",response)
    // })

    // console.log("source === ",this.get_source)
    // let req = new XMLHttpRequest();
    // req.open('GET', document.location, false);
    // req.send(null);
    // console.log("req === ",req);
    // let content=req.getResponseHeader('SOURCE');
    // let user_id = req.getResponseHeader('HTTP_SOURCE');
    // let all_info = req.getAllResponseHeaders();
    // console.log("content === ",content);
    // // content="user_id";
    // this.headercontent = content;
    // this.user_id = user_id;
    // this.all_info = String(all_info);

    // var headers = req.getAllResponseHeaders('HTTP_sign');
    // console.log('headers === ',headers);
  },
  // updated(){},
  activated() {

  },
  mounted() {
    // this.hei = document.getElementById("content-box").offsetHeight;
    // this.hei = 3000;
    // console.log("complianceWarning-height:",document.getElementById("content-box").offsetHeight*2);
    window.addEventListener('scroll', this.handleScroll, false);
    // console.log("imagerTab",document.getElementById("imagerTab").offsetTop);
    // console.log("financialWarning",document.getElementById("financialWarning").offsetTop);
    // console.log("marketWarning",document.getElementById("marketWarning").offsetTop);
    // console.log("complianceWarning",document.getElementById("financialWarning").offsetTop);
    // this.hei = (document.getElementById("imagerTab").offsetTop+document.getElementById("financialWarning").offsetTop+document.getElementById("marketWarning").offsetTop+document.getElementById("complianceWarning").offsetTop)*2;
    // console.log("content-box",document.getElementById("content-box").offsetTop);
  },
  // beforeDestroy() {
  //   window.removeEventListener('scroll', this.handleScroll. false);
  // },
  methods: {
    /**
     * 存储每个锚点的位置
     */
    setPos() {
      this.navs.forEach((nav) => {
        const dom = document.getElementById(nav.id);
        if (!dom) {
          nav.pos = 0;
        } else{
          nav.pos = dom.offsetTop;
        }
      })
    },
    handleScroll() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      const menu =  document.getElementById('topMenu');
      if (!menu) return ;
      const offsetTop = menu.offsetTop;
      const menuHeight = menu.offsetHeight;
      let index = 0;
      // console.log('ref', this.$refs.topMenu.offsetTop);
      if (scrollTop > offsetTop) { // 滚动超过导航条的位置
        this.isFixedNav = true;
      } else {
        this.isFixedNav = false;
      }
      for(let i = 0; i < this.navs.length; i++){
        const dom = document.getElementById(this.navs[i].id);
        if (!dom) {
          return;
        }
        if(scrollTop + menuHeight + 50 > dom.offsetTop) {
          index = this.navs[i].index;
        }
      }
      // 还有30px就将滚动到底部
      if(scrollTop + clientHeight + 30 >= scrollHeight ) {
        index = this.navs[this.navs.length -1].index;
      }
      this.active = index;
    },
    scroll(index, title) {
      console.log('强制滚动。。');
      this.active = index;
      if(!this.navs[index]) {
        return;
      }
      const id = this.navs[index].id;
      const menu =  document.getElementById('topMenu');
      const elem = document.getElementById(id);
      if (elem && menu) {
        const h = menu.offsetHeight;
        document.body.scrollTop = document.documentElement.scrollTop = elem.offsetTop - h;
      }
      // }else{
      //   this.isShow = false;
      // }
      // console.log(scrollTop)
    },
    getUrlStr(name) {
      // console.log("name",name);
      var url = document.location.toString();
    　var arrObj = url.split("?");
  　　　if (arrObj.length > 1) {
  　　　　　var arrPara = arrObj[1].split("&");
  　　　　　var arr;
  　　　　　for (var i = 0; i < arrPara.length; i++) {
  　　　　　　　arr = arrPara[i].split("=");
  　　　　　　　if (arr != null && arr[0] == name) {
  　　　　　　　　　return arr[1];
  　　　　　　　}
  　　　　　}
  　　　　　return "";
  　　　}
  　　　else { return "" }
    }
  }
}
</script>
<style>
.page-split{
  height: 5px;
  width: 100%;
  background: #EAEAEA;
}
.warning-top-menu{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width:100%;
  color: #757679;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  background-color: #fff;
}
.warning-top-menu a {color: #757679;}
.warning-top-menu .van-tab--active {
    border-bottom: 2px solid #D4B686;
}
.home .fixed{
  width: 100%;
  position:fixed;
  top: -100px;
  transition: top .3s ease;
}
.home .slide-in{
  position:fixed;
  top:0;
  z-index:999;
}
.home{
  /* height: 100vh; */
  min-height: calc(100vh - 98px);
}
.header-fixed{
  /* position: fixed; */
  width: 100%;
  /* top:0; */
  /* z-index: 999; */
}
.content{
  /* padding: 45px 0 0 0; */
}
.ge-title-one {
  color: #222;
  font-size: 14pt;
  font-weight: bold;
}
.ge-title-two{
  color: #222;
  font-size: 12pt;
  font-weight: bold;
  line-height: 12pt;
}
.ge-title-two::before {
  content: "";
  display: block;
  float:left;
  width: 3pt;
  height: 12pt;
  margin-right: 6px;
  background-color:#D4B686;
}
.content-box {
  position: absolute;
  width: 100%;
  top: 0;
}

</style>